<template>
  <div>
    <a-modal class="form1"
             v-model="dialogVisible"
             title="确认开票"
             width="496px"
             height="670px"
             :dialog-style="{ top: '25vh' }"
             ok-text="确认"
             cancel-text="取消"
             @ok="handleOk()"
             @cancel="cancelOK()">
      <a-form-model ref="ruleForm"
                    :model="form"
                    :rules="rules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol">
        <a-form-model-item label="开票金额："
                           prop="money">
          <div>¥{{form.realPaid}}</div>
        </a-form-model-item>
        <a-form-model-item label="开票对象："
                           prop="contactName">
          <div>{{form.contactName}}</div>
        </a-form-model-item>
        <a-form-model-item label="发票编码："
                           prop="code"
                           v-if="codeStatus === 0">
          <div>¥{{form.code}}</div>
        </a-form-model-item>
        <a-form-model-item label="发票编码："
                           prop="code"
                           v-if="codeStatus === 1">
          <div>¥{{form.code}}
            <a-icon type="edit"
                    @click="clickCode" />
          </div>
        </a-form-model-item>
        <a-form-model-item label="发票编码："
                           prop="code"
                           v-if="codeStatus === 2">
          <a-input v-model="form.code"
                   placeholder="请输入发票编码"
                   style="width:240px;margin-bottom: 16px;"
                   v-if="statusIndex === 1" />
          <div v-if="statusIndex === 2">WQE2123EE45</div>
        </a-form-model-item>
        <a-form-model-item label="开票日期："
                           prop="invoiceDate">
          <a-date-picker v-model="form.invoiceDate"
                         type="date"
                         placeholder="请选择开票日期"
                         style="width: 240px;"
                         @change="onChangedistributeFinishStartTime"
                         v-if="statusIndex === 1" />
          <a-icon slot="suffixIcon"
                  type="calendar" />
          </a-range-picker>
          <div v-if="statusIndex === 2">2121-12-12</div>
        </a-form-model-item>
      </a-form-model>
      <template slot="footer"
                v-if="statusIndex === 1">
        <div class="div1">
          <a-button key="back"
                    @click="cancelOK">
            取消
          </a-button>
          <a-button key="submit"
                    type="danger"
                    @click="handleOk">
            确定
          </a-button>
        </div>
      </template>
      <template slot="footer"
                v-if="statusIndex === 2"
                class="ant-modal-footer1">
        <div></div>
      </template>
      <div v-if="xiugaiStatus"
           class="xiugaiStatus"
           @click="xiugaisub"> <img src="../../../../assets/image/sellerHub/xiugais.png"
             alt=""> 修改</div>
    </a-modal>
  </div>
</template>
<script>
import setting from '@/settings.js'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      dialogVisible: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      //当前状态 1缺人开票 2查看
      statusIndex: '',
      xiugaiStatus: false,
      //编码是否可修改 1可修改 0不可修改 2显示修改框
      codeStatus: 1,
      listUrl: [],

      form: {
        id: '',
        realPaid: '2000.00',
        contactName: "宝山汽修厂",
        code: '',
        invoiceDate: ''

      },
      rules: {
        code: [{ required: true, message: '请输入发票编码' }],
        invoiceDate: [{ required: true, message: '请选择开票日期' }],
      }
    }
  },
  methods: {
    //1 开票 2查看
    getList (row, status) {
      console.log(row, status);
      this.statusIndex = status
      this.form.id = row.id
      this.form.contactName = row.tenantName
      this.form.realPaid = row.price
      this.form.code = row.code
      if (status === 1) {
        this.codeStatus = 1
      }
      if (status === 2) {
        this.xiugaiStatus = true
        this.codeStatus = 0
      }
    },
    //确定新增
    handleOk () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          console.log(this.form);
          this.$store.dispatch('request', this.$api.sellerCenter.invoiceOk(this.form)).then(res => {
            console.log(res);
          })
          this.$emit('billOK');
          this.$refs.ruleForm.resetFields();
          this.xiugaiStatus = false
        }
      })

    },
    clickCode () {
      this.codeStatus = 2
    },
    xiugaisub () {
      this.statusIndex = 1
    },
    //取消开票
    cancelOK () {
      this.$refs.ruleForm.resetFields();
      this.xiugaiStatus = false
      this.$emit('cancel');
    },
    beforeUpload (file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('请上传JPG或者PNG格式的图片');
      }
      // const isLt2M = file.size / 1024 / 1024 < 2;
      // if (!isLt2M) {
      //   this.$message.error('请上传2M以内的图片!');
      // } && isLt2M
      return isJpgOrPng;
    },
    // 门头照片上传成功
    headerImageChange (val) {
      if (val.file.status === 'done') {
        this.listUrl.push(val.file.response.result)
      }
      console.log(this.listUrl);
    },
    onChangedistributeFinishStartTime (e) {
      this.form.invoiceDate = e._d.format('yyyy-MM-dd');
    }
  },
  watch: {
    visible (newVal) {
      this.dialogVisible = newVal;
    }
  }
}
</script>
<style lang="less" scoped>
.upload-image-contain {
  float: left;
  width: 200px;
  height: 200px;
  margin-right: 24px;
  margin-bottom: 24px;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.14);
  text-align: center;
  position: relative;
  span {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(50%;-50%);
    width: 15px;
    height: 15px;
    background: url(../../../../assets/image/enter/gb.png);
    background-size: 100% 100%;
    z-index: 1000;
    cursor: pointer;
  }
  div {
    width: 200px;
    height: 200px;
    z-index: 800;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.uploader-img {
  img {
    width: 80px;
    height: 80px;
    margin-bottom: 8px;
  }
  p {
    color: @newColorGreyFontM;
    font-size: 14px;
  }
}

/deep/ .avatar-uploader {
  float: left;
  width: 200px;
}
/deep/ .ant-upload.ant-upload-select-picture-card {
  width: 200px;
  height: 200px;
  border: 1px dashed #ebedf2;
  background: #fdfdfd;
}
/deep/ .ant-form-item {
  margin-bottom: 1px;
}
/deep/ .ant-form-item-label > label {
  color: @newColorGreyFontM;
}
/deep/ .ant-modal-body {
  padding-top: 16px;
  padding-bottom: 20px;
  position: relative;
}
.ant-modal-footer1 {
}
/deep/ .ant-modal-footer {
  padding: 0;
  .div1 {
    padding: 10px 16px;
  }
  .ant-btn {
    width: 72px;
    height: 32px;
    border-radius: 2px;
    font-size: 14px;
  }
}
.xiugaiStatus {
  position: absolute;
  right: 24px;
  top: 24px;
  color: @activeRed;
  cursor: pointer;
  img {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: sub;
  }
}
@media screen and (max-width: 2300px) {
  /deep/.ant-input {
    font-size: 12px !important;
  }
  .xiugaiStatus {
    font-size: 12px;
  }
  /deep/ .ant-form label {
    font-size: 12px;
  }
  /deep/ .ant-form-item {
    font-size: 12px;
  }
  /deep/ .ant-modal-footer .ant-btn {
    font-size: 12px;
  }
}
</style>